<template>
    <div class="person">
      <h2>一辆{{car.brand}}车，价值{{ car.price }}万</h2>
      <button @click="changeBrand">修改汽车品牌</button>
      <button @click="changePrice">修改汽车价格</button>
      <button @click="changeCar">修改汽车</button>
    </div>

    <hr>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我suml+1</button>
    
</template>

<script lang="ts" setup name="Person">
  import { ref, reactive } from 'vue';

  // 数据
  // let car = reactive({brand: '奔驰', price: 100})
  let car = ref({brand: '奔驰', price: 100})
  let sum = ref(0)

  function changeBrand() {
    car.value.brand = '宝马'
  }

  function changePrice() {
    car.value.price += 10
  }

  function changeCar() {
    // car = {brand: '奥拓', price:1}  // 页面不更新
    // car = reactive({brand: '奥拓', price:1})  // 页面不更新
    Object.assign(car,{brand: '奥拓', price:1} )     //页面可以更新，此时对象是reactive
    car.value ={brand: '奥拓', price:1}    //页面可以更新，此时对象是ref
  }

  function changeSum() {
    sum.value += 1
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  li {
    font-size: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>